import React, { memo } from 'react';
import { Row, Col, Button, Space, Input, Select } from 'antd';
import { RightOutlined, UpOutlined } from '@ant-design/icons';
import { IProToolBarProps, ISearchSelector } from '../types';

const { Search } = Input;
const { Option } = Select;

export default memo(function ProToolBar(
  props: IProToolBarProps
): JSX.Element | null {
  const {
    barStyle,
    searchSelector,
    isMoreSearchShow,
    onMoreSearchClick,
    buttonGroup,
    size = 'middle',
    disableSearchMore
  } = props;
  // console.log('proTool加载了')

  const useButtons = () => {
    return buttonGroup ? (
      <Space>
        {buttonGroup.map((item) => {
          // 采用最朴素的if
          if (item.type === 'create')
            return (
              <Button type="primary" size={size} onClick={item.onClick}>
                {item.text}
              </Button>
            );
          if (item.type === 'delete')
            return (
              <Button danger size={size} onClick={item.onClick}>
                {item.text}
              </Button>
            );
          return (
            <Button size={size} onClick={item.onClick}>
              {item.text}
            </Button>
          );
        })}
      </Space>
    ) : (
      <Space>
        <Button>
          {' '}
          type="primary" size={size}
          新增
        </Button>
        <Button>
          {' '}
          danger size={size}
          批量删除
        </Button>
        <Button> size={size}打印</Button>
      </Space>
    );
  };

  const renderSelectBefore = () => {
    const { defaultValue, Options } = searchSelector as ISearchSelector;
    return (
      <Select defaultValue={defaultValue}>
        {Options.map((item) => (
          <Option value={item.value} key={item.value} onClick={item.onClick}>
            {item.label}
          </Option>
        ))}
      </Select>
    );
  };
  const renderSearch = () => {
    if (disableSearchMore) {
      return (
        <Search addonBefore={renderSelectBefore()} enterButton size={size} />
      );
    }
    return (
      <Space>
        {isMoreSearchShow ? (
          <Button
            type="link"
            size="small"
            onClick={() => onMoreSearchClick && onMoreSearchClick(false)}
          >
            收起
            <UpOutlined />
          </Button>
        ) : (
          <>
            <Search
              addonBefore={renderSelectBefore()}
              enterButton
              size={size}
            />
            <Button
              type="link"
              size="small"
              onClick={() => onMoreSearchClick && onMoreSearchClick(true)}
            >
              高级检索
              <RightOutlined style={{ marginLeft: '1px' }} />
            </Button>
          </>
        )}
      </Space>
    );
  };

  return (
    <>
      <Row
        justify="space-between"
        style={{ marginBottom: '15px', ...barStyle }}
      >
        <Col>{useButtons()}</Col>
        {searchSelector && <Col>{renderSearch()}</Col>}
      </Row>
    </>
  );
});
